html {
  font-size: 14px;
}

html {
  position: relative;
  min-height: 100%;
  margin-left: 0 !important;
}

body {
  margin-bottom: 0;
  background: var(--tblr-bg-surface-secondary, #f4f8fd);
  color: var(--tblr-body-color, #26364a);
}

.app-loading-overlay {
  align-items: center;
  background: rgba(24, 36, 51, .28);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity .15s ease, visibility .15s ease;
  visibility: hidden;
  z-index: 2000;
}

.app-loading-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.app-loading-overlay .spinner-border {
  height: 3rem;
  width: 3rem;
}

.app-toast-container {
  bottom: 1rem;
  max-width: calc(100vw - 2rem);
  width: 24rem;
  z-index: 2050;
}

.app-toast {
  border: 1px solid var(--tblr-border-color, #c7d0da);
  border-left: .25rem solid var(--tblr-primary);
  box-shadow: var(--tblr-box-shadow-card);
  max-width: 100%;
  pointer-events: auto;
  position: relative;
  width: 100%;
}

.app-toast .toast-body {
  padding-right: 2.5rem;
}

.app-toast-success {
  border-left-color: var(--tblr-success);
}

.app-toast-error {
  border-left-color: var(--tblr-danger);
}

.app-toast-close {
  flex: 0 0 2rem;
  height: 2rem;
  margin: 0 !important;
  opacity: 1;
  position: absolute;
  right: .5rem;
  top: .5rem;
  width: 2rem;
}

.app-toast-error {
  border-left-color: var(--tblr-danger);
}

th, td {
    vertical-align: middle !important;
}

.employee-filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .employee-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .employee-filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

:root {
  --app-header-height: 64px;
  --app-sidebar-width: 260px;
  --tblr-primary: #3478c8;
  --tblr-primary-rgb: 52, 120, 200;
  --tblr-primary-lt: #eaf2fc;
  --tblr-bg-surface: #ffffff;
  --tblr-bg-surface-secondary: #f3f7fc;
  --tblr-body-color: #26364a;
  --tblr-secondary: #687990;
  --tblr-border-color: #e0e8f2;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --tblr-primary: #78aef7;
  --tblr-primary-rgb: 120, 174, 247;
  --tblr-primary-lt: rgba(120, 174, 247, .15);
  --tblr-bg-surface: #1a2737;
  --tblr-bg-surface-secondary: #121d2b;
  --tblr-body-color: #e4edf8;
  --tblr-secondary: #9bacc1;
  --tblr-border-color: #2b3b50;
}

body {
  transition: background-color 160ms ease, color 160ms ease;
}

.app-shell {
  min-height: 100vh;
}

.main-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: var(--app-header-height);
  background: var(--tblr-bg-surface, #fff);
  border-bottom: 1px solid var(--tblr-border-color, #e6eaf0);
  box-shadow: 0 1px 3px rgba(32, 61, 96, .05);
}

.main-header .navbar-brand {
  color: var(--tblr-body-color);
  font-size: 1.05rem;
  font-weight: 500;
}

.main-header #theme-toggle {
  border: 1px solid var(--tblr-border-color);
  height: 2.5rem;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  width: 2.5rem;
}

.main-header .nav-item.dropdown > .nav-link > .avatar {
  flex: 0 0 2.5rem;
  height: 2.5rem;
  width: 2.5rem;
}

.main-header #theme-toggle:hover {
  background: var(--tblr-primary-lt);
  border-color: var(--tblr-primary);
  color: var(--tblr-primary);
}

.main-header #theme-toggle:focus-visible,
.sidebar-menu a:focus-visible {
  outline: 2px solid var(--tblr-primary);
  outline-offset: 2px;
}

.main-header > .container-fluid {
  flex-wrap: nowrap;
  gap: .5rem;
}

.main-sidebar {
  --app-sidebar-bg: #17263a;
  --app-sidebar-raised: #20344e;
  --app-sidebar-foreground: #e5edf8;
  --app-sidebar-muted: #a6b8d0;
  --app-sidebar-border: #2b405c;
  --app-sidebar-active: #29486f;
  --app-sidebar-accent: #9bc5ff;
  --tblr-offcanvas-width: var(--app-sidebar-width);
  --bs-offcanvas-width: var(--app-sidebar-width);
  background: var(--app-sidebar-bg) !important;
  border-right: 1px solid var(--app-sidebar-border);
  box-shadow: none;
  color: var(--app-sidebar-foreground);
}

.sidebar {
  min-height: 0;
  overflow-y: auto;
  flex: 1;
  padding-bottom: .75rem;
}

.sidebar-search {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: .75rem .75rem .25rem;
  background: var(--tblr-bg-surface, #fff);
}

.sidebar-search .form-control {
  min-width: 0;
  height: 2.25rem;
}

.sidebar-search-empty {
  padding: .75rem .25rem;
  font-size: .875rem;
}

.sidebar-menu,
.sidebar-menu .treeview-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-menu > li.header {
  padding: 1.25rem 1rem .5rem;
  color: var(--tblr-secondary, #667085);
  background: transparent;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.sidebar-menu > li.header ~ li.header {
  margin-top: .25rem;
  border-top: 1px solid var(--tblr-border-color);
}

.sidebar-menu a {
  display: flex;
  align-items: center;
  gap: .5rem;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.sidebar-menu > li > a {
  min-height: 2.5rem;
  margin: 2px 0;
  padding: .55rem .65rem;
  color: var(--tblr-body-color, #354052);
  border-left: 0;
  border-radius: 0;
  transition: background-color 120ms ease, color 120ms ease;
}

.sidebar-menu a > .fa,
.sidebar-menu a > .ion {
  width: 20px;
  flex-shrink: 0;
  color: var(--tblr-secondary, #667085);
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
  color: var(--tblr-primary, #206bc4);
  background: var(--tblr-primary-lt, #f1f5fb);
}

.sidebar-menu > li:hover > a > .fa,
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.menu-open > a > .fa {
  color: var(--tblr-primary, #206bc4);
}

.sidebar-menu .treeview-menu {
  background: var(--tblr-bg-surface, #fff);
  padding-left: 0;
}

.sidebar-menu .treeview-menu > li > a {
  padding: 8px 12px 8px 36px;
  color: var(--tblr-secondary, #5c6675);
}

.sidebar-menu .treeview-menu > li:hover > a,
.sidebar-menu .treeview-menu > li.active > a {
  color: var(--tblr-primary, #206bc4);
  background: var(--tblr-bg-surface-secondary, #f8f9fc);
}

.sidebar-menu .treeview-menu .treeview-menu {
  padding-left: 14px;
}

.sidebar-menu .treeview-menu > li > a[aria-disabled="true"] {
  color: var(--tblr-secondary, #667085);
  background: transparent;
  cursor: not-allowed;
}

.sidebar-menu .pull-right-container {
  margin-left: auto;
  flex-shrink: 0;
}

.sidebar-menu .menu-open > a > .pull-right-container > .fa {
  transform: rotate(-90deg);
}

.main-sidebar .offcanvas-header {
  color: var(--app-sidebar-foreground);
  border-bottom: 1px solid var(--app-sidebar-border);
}

.main-sidebar .btn-close {
  filter: invert(1) grayscale(1);
}

.main-sidebar .sidebar-search {
  background: var(--app-sidebar-bg);
}

.main-sidebar .sidebar-search .form-control {
  color: var(--app-sidebar-foreground);
  background: var(--app-sidebar-raised);
  border-color: var(--app-sidebar-border);
}

.main-sidebar .sidebar-search .form-control::placeholder,
.main-sidebar .sidebar-search .input-icon-addon,
.main-sidebar .sidebar-search-empty {
  color: var(--app-sidebar-muted);
}

.main-sidebar .sidebar-search .form-control:focus {
  border-color: var(--app-sidebar-accent);
  box-shadow: 0 0 0 .2rem rgba(155, 197, 255, .18);
}

.main-sidebar .sidebar-menu > li.header {
  color: var(--app-sidebar-muted);
}

.main-sidebar .sidebar-menu > li.header ~ li.header {
  border-top-color: var(--app-sidebar-border);
}

.main-sidebar .sidebar-menu > li > a {
  color: var(--app-sidebar-foreground);
}

.main-sidebar .sidebar-menu a > .fa,
.main-sidebar .sidebar-menu a > .ion {
  color: var(--app-sidebar-muted);
}

.main-sidebar .sidebar-menu > li:hover > a,
.main-sidebar .sidebar-menu > li.active > a,
.main-sidebar .sidebar-menu > li.menu-open > a {
  color: #ffffff;
  background: var(--app-sidebar-active);
}

.main-sidebar .sidebar-menu > li.active > a {
  box-shadow: inset 3px 0 var(--app-sidebar-accent);
  border-radius: 5px 0 0 5px;
}

.main-sidebar .sidebar-menu > li:hover > a > .fa,
.main-sidebar .sidebar-menu > li.active > a > .fa,
.main-sidebar .sidebar-menu > li.menu-open > a > .fa {
  color: var(--app-sidebar-accent);
}

.main-sidebar .sidebar-menu .treeview-menu {
  background: var(--app-sidebar-bg);
}

.main-sidebar .sidebar-menu .treeview-menu > li > a {
  color: var(--app-sidebar-muted);
}

.main-sidebar .sidebar-menu .treeview-menu > li:hover > a,
.main-sidebar .sidebar-menu .treeview-menu > li.active > a {
  color: #ffffff;
  background: var(--app-sidebar-raised);
}

.main-sidebar .sidebar-menu .treeview-menu > li.active > a {
  box-shadow: inset 3px 0 var(--app-sidebar-accent);
}

.main-sidebar .sidebar-menu .treeview-menu > li > a[aria-disabled="true"] {
  color: #7f92ac;
}

.main-sidebar .sidebar-menu a:focus-visible {
  outline-color: var(--app-sidebar-accent);
}

.main-sidebar {
  scrollbar-color: #405673 var(--app-sidebar-bg);
  scrollbar-width: thin;
}

.content-wrapper {
  min-width: 0;
  min-height: calc(100vh - var(--app-header-height));
}

.content-wrapper .page-header {
  padding-top: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--tblr-border-color);
}

.content-wrapper .page-title {
  font-size: 1.35rem;
  font-weight: 650;
}

.content-wrapper .page-title > .text-secondary {
  display: block;
  margin-top: .25rem;
  font-size: .875rem;
  font-weight: 400;
}

@media (min-width: 768px) {
  .main-sidebar.offcanvas-md {
    position: fixed;
    top: var(--app-header-height);
    bottom: 0;
    left: 0;
    width: var(--app-sidebar-width);
    overflow-y: auto;
    background-color: var(--app-sidebar-bg) !important;
  }

  .content-wrapper {
    margin-left: var(--app-sidebar-width);
  }

  .navigation-collapsed .main-sidebar {
    visibility: hidden;
    transform: translateX(-100%);
  }

  .navigation-collapsed .content-wrapper {
    margin-left: 0;
  }
}

@media print {
  .main-sidebar {
    display: none !important;
  }

  .content-wrapper {
    margin-left: 0;
  }
}

.content-wrapper .card,
.content-wrapper .card-body,
.content-wrapper .row > *,
.content-wrapper .flex-fill {
  min-width: 0;
}

.content-wrapper .card {
  border-radius: 4px;
  margin-bottom: 1rem;
  border-color: var(--tblr-border-color);
  box-shadow: 0 1px 2px rgba(32, 61, 96, .035);
}

.content-wrapper .card-header {
  flex-wrap: wrap;
  gap: .5rem;
  background: var(--tblr-bg-surface);
  border-bottom-color: var(--tblr-border-color);
}

.content-wrapper .card-title {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0;
}

.content-wrapper .card-body > .row {
  row-gap: 1rem;
}

.content-wrapper .card > .avatar {
  margin: 0;
}

.content-wrapper .card .h3,
.content-wrapper .card h3 {
  overflow-wrap: anywhere;
}

.content-wrapper .payroll-net-pay {
  min-height: 260px;
}

.content-wrapper .summary-list > li > a {
  display: block;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--tblr-border-color);
}

.content-wrapper .form-check label {
  font-weight: 400;
}

.content-wrapper .form-control,
.content-wrapper .form-select {
  max-width: 100%;
}

.content-wrapper .form-control:focus,
.content-wrapper .form-select:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--tblr-primary-rgb), .16);
}

.content-wrapper div.form-control {
  height: auto;
  overflow-wrap: anywhere;
}

.content-wrapper .attendance-total-time {
  min-height: 41px;
  display: flex;
  align-items: center;
}

.content-wrapper .table-responsive {
  max-width: 100%;
}

.content-wrapper .table thead th {
  color: var(--tblr-secondary);
  font-size: .8rem;
  font-weight: 600;
  border-bottom-color: var(--tblr-border-color);
}

.content-wrapper .payroll-table-scroll {
  max-height: min(55vh, 400px);
  overflow: auto;
  border: 1px solid var(--tblr-border-color);
  margin-bottom: 1rem;
}

.payroll-data-card .card-header,
.advance-data-card .card-header,
.loan-data-card .card-header {
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.payroll-data-card .card-title,
.advance-data-card .card-title,
.loan-data-card .card-title {
  font-size: 1rem;
  font-weight: 700;
}

.loan-tab-heading {
  padding: .9rem 1rem .7rem;
  border-bottom: 1px solid var(--tblr-border-color);
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.loan-tab-heading h2 {
  margin: 0 0 .2rem;
  color: var(--tblr-body-color);
  font-size: 1rem;
  font-weight: 700;
}

.instant-loan-metric {
  display: flex;
  min-height: 92px;
  flex-direction: row;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  border-color: var(--tblr-border-color);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(32, 61, 96, .045);
}

.instant-loan-metric .avatar {
  flex: 0 0 auto;
}

.instant-loan-metric-value {
  margin-top: .15rem;
  color: var(--tblr-body-color);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.instant-loan-metric > .badge {
  margin-left: auto;
}

.instant-loan-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: .9rem 1rem;
  border-color: var(--tblr-border-color);
  border-radius: 6px;
}

.instant-loan-detail-meta > div {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

.instant-loan-detail-meta > div + div {
  padding-left: 1rem;
  border-left: 1px solid var(--tblr-border-color);
}

.instant-loan-detail-meta strong {
  overflow-wrap: anywhere;
}

.instant-return-table {
  min-width: 780px;
}

.instant-return-memo {
  min-width: 200px;
  max-width: 360px;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 575.98px) {
  .instant-loan-metric {
    flex-wrap: wrap;
  }

  .instant-loan-metric > .badge {
    margin-left: 3.25rem;
  }

  .instant-loan-detail-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
  }

  .instant-loan-detail-meta > div + div {
    padding-top: .75rem;
    padding-left: 0;
    border-top: 1px solid var(--tblr-border-color);
    border-left: 0;
  }
}

.advance-request-page {
  align-items: flex-start;
}

.advance-request-form-card .card-header,
.advance-request-employee-card .card-header,
.advance-request-history-card .card-header {
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.advance-request-form-card .card-title,
.advance-request-employee-card .card-title,
.advance-request-history-card .card-title {
  font-size: 1rem;
  font-weight: 700;
}

.advance-request-form-card .form-label {
  margin-bottom: .4rem;
  font-weight: 600;
}

.advance-request-form-card textarea {
  min-height: 92px;
  resize: vertical;
}

.advance-request-empty-state {
  min-height: 120px;
  border-style: dashed;
  background: var(--tblr-bg-surface);
}

.advance-request-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1.25rem;
}

.advance-request-facts > div {
  min-width: 0;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--tblr-border-color);
}

.advance-request-facts dt {
  margin-bottom: .2rem;
  color: var(--tblr-secondary);
  font-size: .8rem;
  font-weight: 600;
}

.advance-request-facts dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.advance-request-payable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--tblr-primary);
  border-left-width: 4px;
  border-radius: 4px;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}

.advance-request-payable span {
  font-weight: 600;
}

.advance-request-payable strong {
  font-size: 1.2rem;
  white-space: nowrap;
}

.advance-request-history-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.advance-request-history-table {
  min-width: 1200px;
}

.advance-request-history-table .advance-request-memo {
  min-width: 170px;
  max-width: 240px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.advance-request-history-empty {
  padding: 1.25rem 1rem;
  text-align: center;
}

.tl-team-page {
  align-items: stretch;
}

.tl-code-check-card .card-header,
.tl-team-overview-card .card-header,
.tl-team-table-card .card-header {
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.tl-code-check-card .card-title,
.tl-team-table-card .card-title {
  font-size: 1rem;
  font-weight: 700;
}

.tl-team-overview-title {
  font-size: 1rem;
  font-weight: 700;
}

.tl-team-tabs-nav {
  flex-wrap: nowrap;
  gap: .25rem;
  overflow-x: auto;
  margin-bottom: .75rem;
  border-bottom-color: var(--tblr-border-color);
}

.tl-team-tabs-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}

.tl-team-tabs > .tab-content > #my-loans-pane,
.tl-team-tabs > .tab-content > #my-instant-loans-pane {
  overflow: hidden;
  border: 1px solid var(--tblr-border-color);
  border-top: 0;
  border-radius: 0 4px 4px 4px;
  background: var(--tblr-bg-surface);
}

.tl-code-check-card .form-label {
  margin-bottom: .4rem;
  font-weight: 600;
}

.tl-code-check-card .form-control {
  min-width: 0;
}

.tl-code-check-result:empty {
  display: none;
}

.tl-code-result-message {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 0;
}

.tl-team-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.tl-team-table {
  min-width: 1500px;
}

.tl-team-table th,
.tl-team-table td {
  white-space: nowrap;
}

.tl-team-table th:nth-child(2),
.tl-team-table td:nth-child(2),
.tl-team-table th:nth-child(3),
.tl-team-table td:nth-child(3) {
  min-width: 165px;
}

.bonus-confirmation-dialog .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 12px 36px rgba(24, 36, 51, .2);
}

.bonus-confirmation-dialog .modal-header {
  align-items: center;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom-color: var(--tblr-border-color);
}

.bonus-confirmation-dialog .modal-title {
  margin-bottom: .2rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.bonus-confirmation-dialog .modal-footer {
  gap: .5rem;
  padding: .85rem 1.25rem 1rem;
  border-top: 0;
}

.bonus-payroll-panel .card-header {
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.bonus-payroll-panel .card-title {
  font-size: 1rem;
  font-weight: 700;
}

.bonus-payroll-scroll {
  max-width: 100%;
  max-height: min(65vh, 620px);
  overflow: auto;
  border-bottom: 1px solid var(--tblr-border-color);
}

.bonus-payroll-no-records {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 96px;
  padding: 1.25rem 1rem;
}

.bonus-payroll-table {
  min-width: 2550px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .8rem;
}

.bonus-payroll-table th,
.bonus-payroll-table td {
  padding: .65rem .7rem;
  border-color: var(--tblr-border-color);
  vertical-align: middle;
  white-space: nowrap;
}

.bonus-payroll-table thead .payroll-group-row th {
  position: sticky;
  top: 0;
  z-index: 6;
}

.bonus-payroll-table thead tr:last-child th {
  position: sticky;
  top: 34px;
  z-index: 5;
}

.bonus-payroll-table .bonus-sticky-employee,
.bonus-payroll-table .bonus-sticky-employee-heading,
.bonus-payroll-table .bonus-sticky-employee-group {
  position: sticky;
  left: 0;
  width: 210px;
  min-width: 210px;
  background: var(--tblr-bg-surface);
  box-shadow: 1px 0 0 var(--tblr-border-color);
}

.bonus-payroll-table .bonus-sticky-employee {
  z-index: 3;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bonus-payroll-table .bonus-sticky-employee-heading,
.bonus-payroll-table .bonus-sticky-code-heading {
  z-index: 8;
}

.bonus-payroll-table thead tr:last-child .bonus-sticky-employee-heading,
.bonus-payroll-table thead tr:last-child .bonus-sticky-code-heading,
.bonus-payroll-table thead tr:last-child .bonus-sticky-input-heading {
  z-index: 10;
}

.bonus-payroll-table .bonus-sticky-employee-group {
  z-index: 7;
  width: 298px;
  min-width: 298px;
}

.bonus-payroll-table thead .payroll-group-row .bonus-sticky-employee-group,
.bonus-payroll-table thead .payroll-group-row .bonus-sticky-input-group {
  z-index: 9;
}

.bonus-payroll-table .bonus-sticky-code,
.bonus-payroll-table .bonus-sticky-code-heading {
  position: sticky;
  left: 210px;
  width: 88px;
  min-width: 88px;
  background: var(--tblr-bg-surface);
  box-shadow: 1px 0 0 var(--tblr-border-color);
}

.bonus-payroll-table .bonus-sticky-code {
  z-index: 3;
  max-width: 88px;
}

.bonus-payroll-table .bonus-sticky-code-heading {
  z-index: 8;
}

.bonus-payroll-table tbody .bonus-sticky-employee,
.bonus-payroll-table tbody .bonus-sticky-code {
  z-index: 2;
}

.bonus-payroll-table .bonus-sticky-input,
.bonus-payroll-table .bonus-sticky-input-heading,
.bonus-payroll-table .bonus-sticky-input-group {
  position: sticky;
  right: 0;
  width: 150px;
  min-width: 150px;
  background: var(--tblr-bg-surface);
  box-shadow: -1px 0 0 var(--tblr-border-color);
}

.bonus-payroll-table .bonus-sticky-input-heading {
  top: 34px;
  z-index: 8;
}

.bonus-payroll-table .bonus-sticky-input-group {
  z-index: 7;
}

.bonus-payroll-table tbody .bonus-sticky-input {
  z-index: 2;
}

.bonus-payroll-table .bonus-extra-input {
  min-width: 120px;
  text-align: right;
}

.bonus-report-table .bonus-report-department {
  min-width: 180px;
}

.bonus-report-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  padding: .9rem 1rem;
  border-top: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface);
}

.bonus-report-stat {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .2rem;
}

.bonus-report-stat + .bonus-report-stat {
  padding-left: 1rem;
  border-left: 1px solid var(--tblr-border-color);
}

.bonus-report-stat span {
  color: var(--tblr-secondary);
  font-size: .8rem;
}

.bonus-report-stat strong {
  color: var(--tblr-body-color);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.bonus-payroll-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1rem;
}

.bonus-payroll-total {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 145px;
  color: var(--tblr-secondary);
  font-size: .85rem;
}

.bonus-payroll-total strong {
  color: var(--tblr-body-color);
  font-size: 1rem;
}

.bonus-payroll-total-amount {
  padding-left: 1rem;
  border-left: 1px solid var(--tblr-border-color);
}

.bonus-payroll-footer > .btn {
  margin-left: auto;
}

@media (max-width: 575.98px) {
  .bonus-payroll-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .bonus-payroll-total-amount {
    padding-left: 0;
    border-left: 0;
  }

  .bonus-payroll-footer > .btn {
    margin-left: 0;
  }

  .bonus-report-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bonus-report-stat:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

.payroll-salary-scroll,
.payroll-history-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.payroll-history-scroll {
  border: 1px solid var(--tblr-border-color);
  border-radius: 4px;
}

.payroll-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .825rem;
}

.payroll-salary-table {
  min-width: 1080px;
}

.payroll-history-table {
  min-width: 2300px;
}

.advance-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.advance-history-table {
  min-width: 1320px;
}

.loan-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.employee-loan-table {
  min-width: 1120px;
}

.instant-loan-table {
  min-width: 1400px;
}

.loan-installment-table {
  min-width: 900px;
}

.payroll-table thead .payroll-group-row th {
  padding: .65rem .75rem;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
  border-bottom: 0;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.payroll-table thead tr:last-child th {
  padding: .65rem .75rem;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.payroll-table tbody td {
  padding: .7rem .75rem;
  border-color: var(--tblr-border-color);
}

.payroll-history-table .payroll-sticky-month,
.payroll-history-table thead tr:last-child th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--tblr-bg-surface);
  box-shadow: 1px 0 0 var(--tblr-border-color);
}

.payroll-history-table tbody .payroll-sticky-month {
  z-index: 1;
}

.advance-history-table .advance-sticky-requested,
.advance-history-table thead tr:last-child th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 128px;
  min-width: 128px;
  max-width: 128px;
  background: var(--tblr-bg-surface);
  box-shadow: 1px 0 0 var(--tblr-border-color);
}

.advance-history-table .advance-sticky-approved,
.advance-history-table thead tr:last-child th:nth-child(2) {
  position: sticky;
  left: 128px;
  z-index: 2;
  width: 128px;
  min-width: 128px;
  max-width: 128px;
  background: var(--tblr-bg-surface);
  box-shadow: 1px 0 0 var(--tblr-border-color);
}

.advance-history-table tbody .advance-sticky-requested,
.advance-history-table tbody .advance-sticky-approved {
  z-index: 1;
}

.advance-history-table .advance-memo {
  min-width: 170px;
  max-width: 240px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.loan-installment-table .loan-installment-date {
  min-width: 150px;
  white-space: nowrap;
}

.loan-installment-table .loan-installment-memo {
  min-width: 180px;
  max-width: 280px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.payroll-history-table .payroll-sticky-action,
.payroll-history-table thead tr:last-child th:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  width: 56px;
  min-width: 56px;
  background: var(--tblr-bg-surface);
  box-shadow: -1px 0 0 var(--tblr-border-color);
}

.employee-loan-table .loan-sticky-action,
.employee-loan-table thead tr:last-child th:last-child,
.instant-loan-table .loan-sticky-action,
.instant-loan-table thead tr:last-child th:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  width: 64px;
  min-width: 64px;
  background: var(--tblr-bg-surface);
  box-shadow: -1px 0 0 var(--tblr-border-color);
}

.employee-loan-table tbody .loan-sticky-action,
.instant-loan-table tbody .loan-sticky-action {
  z-index: 1;
}

.payroll-history-table tbody .payroll-sticky-action {
  z-index: 1;
}

.payroll-sticky-action .btn,
.loan-sticky-action .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
}

.payroll-history-table .payroll-net-cell {
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}

.payroll-history-table .payroll-remarks {
  min-width: 150px;
  max-width: 220px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.payroll-empty-state {
  padding: 2rem !important;
  color: var(--tblr-secondary);
  text-align: center;
}

@media (max-width: 575.98px) {
  .payroll-data-card .card-header,
  .advance-data-card .card-header,
  .loan-data-card .card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .advance-request-form-card .card-header,
  .advance-request-employee-card .card-header,
  .advance-request-history-card .card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .advance-request-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .tl-code-check-card .input-group {
    flex-wrap: wrap;
  }

  .tl-code-check-card .input-group .form-control {
    flex-basis: 100%;
  }
}

.content-wrapper .invoice-project-table {
  min-width: 1500px;
}

.content-wrapper .invoice-project-table th {
  white-space: nowrap;
}

.content-wrapper .tracker-invoice-table {
  min-width: 1450px;
}

.content-wrapper .tracker-invoice-table th {
  white-space: nowrap;
}

.content-wrapper .bdo-summary-table th:nth-last-child(-n + 3),
.content-wrapper .bdo-summary-table td:nth-last-child(-n + 3) {
  min-width: 90px;
}

.content-wrapper .linkedin-appointments-table {
  min-width: 1450px;
}

.content-wrapper .linkedin-summary-table {
  min-width: 1400px;
}

.content-wrapper .linkedin-appointments-table th,
.content-wrapper .linkedin-summary-table th {
  white-space: nowrap;
}

.content-wrapper .linkedin-summary-table th:first-child,
.content-wrapper .linkedin-summary-table td:first-child {
  min-width: 180px;
}

.content-wrapper .linkedin-summary-table .linkedin-summary-amount,
.content-wrapper .linkedin-summary-table .linkedin-summary-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.content-wrapper .linkedin-summary-table .linkedin-summary-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: .375rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.content-wrapper .linkedin-summary-table .linkedin-summary-rate {
  color: var(--tblr-secondary);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.content-wrapper .linkedin-summary-table tfoot a {
  font-weight: 600;
}

.linkedin-empty-state {
  min-height: 88px;
}

.dashboard-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--tblr-border-color);
  border-left: 4px solid var(--tblr-primary);
  border-radius: 6px;
  background: linear-gradient(110deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.dashboard-welcome-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
  color: var(--tblr-primary);
  font-size: .75rem;
  font-weight: 700;
}

.dashboard-welcome h2 {
  color: var(--tblr-body-color);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.dashboard-welcome p,
.dashboard-section-heading p {
  font-size: .875rem;
}

.dashboard-welcome-aside {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex: 0 0 auto;
  padding: .65rem .85rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 5px;
  background: var(--tblr-bg-surface);
  color: var(--tblr-secondary);
  font-size: .875rem;
}

.dashboard-welcome-aside .fa {
  color: var(--tblr-primary);
}

.employee-app-grid {
  align-items: stretch;
}

.employee-app-card {
  overflow: hidden;
  border-color: var(--tblr-border-color);
  border-left: 4px solid var(--tblr-primary);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(32, 61, 96, .045);
}
.revenue-month-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
  border: 1px solid var(--tblr-border-color);
  border-left: 4px solid var(--tblr-primary);
  border-radius: 6px;
  background: linear-gradient(110deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.revenue-month-eyebrow {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .25rem;
  color: var(--tblr-primary);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.revenue-month-heading h2 {
  margin: 0;
  color: var(--tblr-body-color);
  font-size: 1.2rem;
  font-weight: 700;
}

.revenue-dashboard-card {
  overflow: hidden;
  border-color: var(--tblr-border-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(32, 61, 96, .045);
}

.revenue-dashboard-card .card-header {
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem;
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.revenue-dashboard-card .card-title {
  font-size: 1rem;
  font-weight: 700;
}

.revenue-dashboard-table {
  min-width: 1650px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.revenue-dashboard-table th,
.revenue-dashboard-table td {
  padding: .65rem .75rem;
  border-color: var(--tblr-border-color);
  vertical-align: middle;
  text-align: left !important;
}

.revenue-dashboard-table thead tr:last-child th:not(:first-child),
.revenue-dashboard-table tbody td:not(:first-child),
.revenue-dashboard-table tfoot th:not(:first-child) {
  text-align: right !important;
}

.revenue-dashboard-table thead tr:last-child th,
.revenue-dashboard-table tbody td:not(:first-child),
.revenue-dashboard-table tfoot th:not(:first-child) {
  white-space: nowrap;
}

.revenue-dashboard-table .revenue-sticky-unit-group,
.revenue-dashboard-table .revenue-sticky-unit-heading,
.revenue-dashboard-table tbody td:first-child,
.revenue-dashboard-table tfoot th:first-child {
  position: sticky;
  left: 0;
  min-width: 200px;
  background: var(--tblr-bg-surface);
  box-shadow: 1px 0 0 var(--tblr-border-color);
}

.revenue-dashboard-table .revenue-sticky-unit-group {
  z-index: 7;
  width: 300px;
  min-width: 300px;
}

.revenue-dashboard-table .revenue-sticky-unit-heading {
  z-index: 6;
  max-width: 240px;
  overflow-wrap: anywhere;
}

.revenue-dashboard-table tbody td:first-child,
.revenue-dashboard-table tfoot th:first-child {
  z-index: 2;
  max-width: 240px;
  overflow-wrap: anywhere;
}

.revenue-dashboard-table tfoot th {
  padding-top: .8rem;
  padding-bottom: .8rem;
  color: var(--tblr-body-color);
  background: var(--tblr-primary-lt);
  font-weight: 700;
}

.revenue-dashboard-table.table-hover > tbody > tr.revenue-negative-profit > * {
  background-color: #fbe9eb;
}

[data-bs-theme="dark"] .revenue-dashboard-table.table-hover > tbody > tr.revenue-negative-profit > * {
  background-color: #42272b;
}

.revenue-dashboard-table tbody tr.revenue-negative-profit > .revenue-negative-profit-value {
  color: var(--tblr-red, #d63939);
  font-weight: 700;
}

.revenue-load-more {
  display: flex;
  justify-content: center;
  padding: .25rem 0 1rem;
}

.revenue-load-card .card-header,
.revenue-summary-panel .card-header,
.revenue-editor-panel .card-header {
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.revenue-load-card .card-title,
.revenue-summary-panel .card-title,
.revenue-editor-panel .card-title {
  font-size: 1rem;
  font-weight: 700;
}

.revenue-load-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 1rem;
}

.revenue-load-form-grid > div {
  min-width: 0;
}

.revenue-load-form-grid .form-label {
  margin-bottom: .4rem;
  font-weight: 600;
}

.revenue-load-action .btn {
  min-height: 38px;
  white-space: nowrap;
}

.revenue-editor-empty {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.15rem 1rem;
  border: 1px dashed var(--tblr-border-color);
  border-radius: 4px;
  background: var(--tblr-bg-surface);
}

.revenue-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem 1rem;
}

.revenue-summary-grid > div {
  min-width: 0;
  padding: .35rem .75rem;
  border-left: 2px solid var(--tblr-primary-lt);
}

.revenue-summary-grid dt {
  margin-bottom: .2rem;
  color: var(--tblr-secondary);
  font-size: .8rem;
}

.revenue-summary-grid dd {
  margin: 0;
  color: var(--tblr-body-color);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.revenue-editor-scroll {
  max-width: 100%;
  max-height: min(60vh, 540px);
  overflow: auto;
}

.revenue-editor-table {
  min-width: 1250px;
  font-variant-numeric: tabular-nums;
}

.revenue-editor-table th,
.revenue-editor-table td {
  padding: .55rem .65rem;
  vertical-align: middle;
  white-space: nowrap;
}

.revenue-editor-table thead .payroll-group-row th {
  position: sticky;
  top: 0;
  z-index: 5;
}

.revenue-editor-table thead tr:last-child th {
  position: sticky;
  top: 34px;
  z-index: 4;
}

.revenue-editor-table .revenue-editor-department,
.revenue-editor-table thead tr:last-child th:first-child {
  position: sticky;
  left: 0;
  z-index: 6;
  min-width: 205px;
  background: var(--tblr-bg-surface);
  box-shadow: 1px 0 0 var(--tblr-border-color);
}

.revenue-editor-table tbody .revenue-editor-department {
  z-index: 3;
}

.revenue-editor-table .form-control {
  min-width: 130px;
}

.revenue-editor-table .revenue-editor-department .form-control {
  min-width: 190px;
}

.revenue-editor-table .revenue-readonly-input {
  border-color: transparent;
  background: var(--tblr-bg-surface-secondary);
}

.revenue-editor-table .revenue-editable-input {
  border-color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}

.revenue-editor-table .revenue-editable-input:focus {
  box-shadow: 0 0 0 .15rem rgba(var(--tblr-primary-rgb), .16);
}

.revenue-editable-heading::after {
  content: " *";
  color: var(--tblr-primary);
}

.revenue-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border-top: 1px solid var(--tblr-border-color);
}

@media (max-width: 575.98px) {
  .revenue-month-heading {
    align-items: flex-start;
    flex-direction: column;
    padding: .9rem 1rem;
  }

  .revenue-dashboard-card .card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .revenue-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .revenue-editor-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 767.98px) {
  .revenue-load-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .revenue-load-action {
    grid-column: 1 / -1;
  }
}

.employee-app-email {
  background: linear-gradient(110deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.employee-app-survey {
  border-left-color: var(--tblr-green, #2fb344);
  background: linear-gradient(110deg, var(--tblr-green-lt, #eaf7ef), var(--tblr-bg-surface) 72%);
}

.employee-app-card .card-body {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 168px;
  padding: 1.25rem;
}

.employee-app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--tblr-border-color);
  border-radius: 6px;
  background: var(--tblr-bg-surface);
  color: var(--tblr-primary);
  font-size: 1.2rem;
}

.employee-app-survey .employee-app-icon {
  color: var(--tblr-green, #2fb344);
}

.employee-app-content {
  min-width: 0;
}

.employee-app-kicker {
  margin-bottom: .35rem;
  color: var(--tblr-primary);
  font-size: .72rem;
  font-weight: 700;
}

.employee-app-survey .employee-app-kicker {
  color: var(--tblr-green, #2fb344);
}

.employee-app-content h2 {
  margin: 0 0 .3rem;
  color: var(--tblr-body-color);
  font-size: 1.1rem;
  font-weight: 700;
}

.employee-app-content p {
  max-width: 34rem;
  margin: 0;
  color: var(--tblr-secondary);
  font-size: .9rem;
}

.employee-app-action {
  white-space: nowrap;
}

.user-dashboard-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--tblr-border-color);
  border-left: 4px solid var(--tblr-primary);
  border-radius: 6px;
  background: linear-gradient(110deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.user-dashboard-eyebrow {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .3rem;
  color: var(--tblr-primary);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.user-dashboard-overview h2 {
  margin: 0 0 .2rem;
  color: var(--tblr-body-color);
  font-size: 1.15rem;
  font-weight: 700;
}

.user-dashboard-metric,
.user-dashboard-role-card {
  overflow: hidden;
  border-color: var(--tblr-border-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(32, 61, 96, .045);
}

.user-dashboard-metric {
  border-top: 3px solid var(--tblr-primary);
}

.user-dashboard-active {
  border-top-color: var(--tblr-green, #2fb344);
}

.user-dashboard-blocked {
  border-top-color: var(--tblr-orange, #f59f00);
}

.user-dashboard-metric .card-body {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 108px;
  padding: 1rem 1.15rem;
}

.user-dashboard-metric-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--tblr-primary-lt);
  color: var(--tblr-primary);
}

.user-dashboard-active .user-dashboard-metric-icon {
  background: var(--tblr-green-lt, #eaf7ef);
  color: var(--tblr-green, #2fb344);
}

.user-dashboard-blocked .user-dashboard-metric-icon {
  background: var(--tblr-orange-lt, #fff4e6);
  color: var(--tblr-orange, #f59f00);
}

.user-dashboard-metric-value {
  margin-top: .1rem;
  color: var(--tblr-body-color);
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.user-dashboard-role-card .card-header {
  align-items: center;
  padding: .9rem 1rem;
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.user-dashboard-role-card .card-title {
  font-size: 1rem;
  font-weight: 700;
}

.user-dashboard-role-table th,
.user-dashboard-role-table td {
  padding: .7rem 1rem;
  border-color: var(--tblr-border-color);
}

.user-create-card {
  max-width: 860px;
  overflow: hidden;
  border-color: var(--tblr-border-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(32, 61, 96, .045);
}

.user-create-card .card-header {
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.user-create-card .card-title {
  font-size: 1rem;
  font-weight: 700;
}

.user-create-card .form-label {
  margin-bottom: .4rem;
  font-weight: 600;
}

.user-create-employee {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 4px;
  background: var(--tblr-bg-surface-secondary);
}

.user-create-employee .avatar {
  flex: 0 0 auto;
}

.user-create-employee .form-hint {
  margin-top: .35rem;
  color: var(--tblr-secondary);
  font-size: .8rem;
}

.user-create-actions {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tblr-border-color);
}

.user-directory-filter-card,
.user-directory-results {
  overflow: hidden;
  border-color: var(--tblr-border-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(32, 61, 96, .045);
}

.user-directory-filter-card .card-header,
.user-directory-results .card-header {
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.user-directory-filter-card .card-title,
.user-directory-results .card-title {
  font-size: 1rem;
  font-weight: 700;
}

.user-directory-filter-card .form-label {
  margin-bottom: .4rem;
  color: var(--tblr-secondary);
  font-size: .82rem;
  font-weight: 600;
}

.user-directory-filter-card .card-body {
  padding: 1rem;
}

.user-directory-results-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.user-role-filter-panel {
  overflow: hidden;
  border-color: var(--tblr-border-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(32, 61, 96, .045);
}

.user-role-filters .card-header,
.user-role-results .card-header {
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.user-role-filters .card-title,
.user-role-results .card-title {
  font-size: 1rem;
  font-weight: 700;
}

.grade-management-page {
  display: grid;
  gap: 1rem;
}

.grade-management-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.grade-management-card {
  overflow: hidden;
  border-color: var(--tblr-border-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(32, 61, 96, .045);
}

.grade-management-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.grade-management-card .card-title {
  font-size: 1rem;
  font-weight: 700;
}

.grade-management-table thead th {
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .grade-management-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .grade-management-card .card-header {
    align-items: flex-start;
  }
}

.user-role-filter-panel .form-label {
  margin-bottom: .4rem;
  color: var(--tblr-secondary);
  font-size: .82rem;
  font-weight: 600;
}

.user-role-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.user-role-table {
  min-width: 1700px;
}

.user-role-table th,
.user-role-table td {
  padding: .65rem .75rem;
  border-color: var(--tblr-border-color);
  vertical-align: middle;
  white-space: nowrap;
}

.user-role-table .user-role-sticky-employee,
.user-role-table thead tr:last-child .user-role-sticky-employee-heading {
  position: sticky;
  left: 0;
  width: 205px;
  min-width: 205px;
  max-width: 205px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--tblr-bg-surface);
  box-shadow: 1px 0 0 var(--tblr-border-color);
}

.user-role-table thead tr:last-child .user-role-sticky-employee-heading {
  z-index: 8;
}

.user-role-table tbody .user-role-sticky-employee {
  z-index: 2;
}

.user-role-table .user-role-sticky-action,
.user-role-table thead tr:last-child .user-role-sticky-action-heading,
.user-role-table thead .payroll-group-row .user-role-sticky-action-group {
  position: sticky;
  right: 0;
  width: 72px;
  min-width: 72px;
  background: var(--tblr-bg-surface);
  box-shadow: -1px 0 0 var(--tblr-border-color);
}

.user-role-table thead tr:last-child .user-role-sticky-action-heading {
  z-index: 8;
}

.user-role-table thead .payroll-group-row .user-role-sticky-action-group {
  z-index: 7;
}

.user-role-table tbody .user-role-sticky-action {
  z-index: 2;
}

.user-role-table .user-role-sticky-action .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
}

.user-role-table .user-role-names {
  min-width: 220px;
  max-width: 320px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.user-role-edit-page .card {
  overflow: hidden;
  border-color: var(--tblr-border-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(32, 61, 96, .045);
}

.user-role-edit-page .card-header {
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.user-role-edit-page .card-title {
  font-size: 1rem;
  font-weight: 700;
}

.user-role-employee-name {
  color: var(--tblr-body-color);
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.user-role-employee-facts > div {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .65rem 0;
  border-top: 1px solid var(--tblr-border-color);
}

.user-role-employee-facts dt {
  color: var(--tblr-secondary);
  font-size: .8rem;
}

.user-role-employee-facts dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.user-role-choice-list {
  display: grid;
  gap: .5rem;
}

.user-role-choice {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 42px;
  padding: .55rem .7rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 4px;
  background: var(--tblr-bg-surface);
  cursor: pointer;
}

.user-role-choice:has(input:checked) {
  border-color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}

.user-role-choice .form-check-input {
  flex: 0 0 auto;
  margin: 0;
}

.user-role-choice span {
  overflow-wrap: anywhere;
}

.user-role-empty-state {
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: .75rem;
  border: 1px dashed var(--tblr-border-color);
  border-radius: 4px;
  color: var(--tblr-secondary);
}

.user-directory-result-meta {
  display: flex;
  justify-content: flex-end;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--tblr-border-color);
}

.user-directory-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.user-directory-table {
  min-width: 1600px;
}

.user-directory-table th,
.user-directory-table td {
  padding: .65rem .75rem;
  border-color: var(--tblr-border-color);
  vertical-align: middle;
  white-space: nowrap;
}

.user-directory-table thead tr:last-child th {
  position: sticky;
  top: 34px;
  z-index: 5;
}

.user-directory-table .user-sticky-employee,
.user-directory-table thead tr:last-child .user-sticky-employee-heading {
  position: sticky;
  left: 0;
  z-index: 7;
  width: 195px;
  min-width: 195px;
  max-width: 195px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--tblr-bg-surface);
  box-shadow: 1px 0 0 var(--tblr-border-color);
}

.user-directory-table tbody .user-sticky-employee {
  z-index: 2;
}

.user-directory-table .user-sticky-action,
.user-directory-table thead tr:last-child .user-sticky-action-heading {
  position: sticky;
  right: 0;
  z-index: 7;
  width: 64px;
  min-width: 64px;
  background: var(--tblr-bg-surface);
  box-shadow: -1px 0 0 var(--tblr-border-color);
}

.user-directory-table tbody .user-sticky-action {
  z-index: 2;
}

.user-directory-table .user-sticky-action .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
}

.user-directory-table tbody tr:hover > .user-sticky-employee,
.user-directory-table tbody tr:hover > .user-sticky-action {
  background: var(--tblr-bg-surface-secondary);
}

@media (max-width: 575.98px) {
  .user-dashboard-overview {
    align-items: flex-start;
    flex-direction: column;
    padding: .9rem 1rem;
  }

  .user-directory-results .card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .user-directory-results-actions {
    justify-content: space-between;
    width: 100%;
  }
}

.dashboard-section {
  margin-bottom: 1.35rem;
}

.dashboard-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.dashboard-section-heading h2 {
  margin: 0 0 .2rem;
  color: var(--tblr-body-color);
  font-size: 1rem;
  font-weight: 700;
}

.dashboard-section-heading p {
  margin: 0;
  color: var(--tblr-secondary);
}

.admin-dashboard .card {
  overflow: hidden;
  border-color: var(--tblr-border-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(32, 61, 96, .045);
}

.admin-dashboard .card-header {
  min-height: 3.25rem;
  padding: .9rem 1rem;
  background: var(--tblr-bg-surface);
}

.admin-dashboard .card-title {
  color: var(--tblr-body-color);
  font-size: .925rem;
  font-weight: 650;
}

.dashboard-team-section > .row {
  margin-bottom: .25rem !important;
}

.dashboard-team-section .card-body {
  min-height: 5.5rem;
  padding: 1rem 1.15rem;
}

.dashboard-team-section .avatar {
  flex: 0 0 auto;
  height: 3rem;
  width: 3rem;
}

.dashboard-team-section .h2 {
  color: var(--tblr-body-color);
  font-size: 1.6rem;
  font-weight: 700;
}

.dashboard-department-panel .table td,
.dashboard-resignation-panel .table td,
.dashboard-resignation-panel .table th {
  padding: .7rem .9rem;
}

.dashboard-department-panel .table tbody tr:hover > *,
.dashboard-resignation-panel .table tbody tr:hover > * {
  background: var(--tblr-bg-surface-secondary);
}

.dashboard-finance-section .card-body {
  min-height: 5.25rem;
  padding: .9rem 1rem;
}

.dashboard-finance-section .h3 {
  color: var(--tblr-body-color);
  font-size: 1.15rem;
  font-weight: 700;
}

.dashboard-chart-card .dashboard-chart-plot {
  min-width: 0;
  position: relative;
  height: 320px;
}

.dashboard-chart-card canvas {
  display: block;
  height: 100% !important;
  max-width: 100%;
  width: 100% !important;
}

.dashboard-chart-card .card-header {
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

@media (max-width: 767.98px) {
  .dashboard-welcome {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem;
  }

  .dashboard-welcome h2 {
    font-size: 1.3rem;
  }

}

@media (max-width: 575.98px) {
  .employee-app-card .card-body {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .85rem;
    padding: 1rem;
  }

  .employee-app-icon {
    width: 42px;
    height: 42px;
  }

  .employee-app-action {
    grid-column: 2;
    justify-self: start;
  }
}

.content-wrapper .nav-tabs {
  flex-wrap: wrap;
  gap: .25rem;
}

.content-wrapper .nav-tabs .nav-link {
  margin: 0;
}

.content-wrapper .ts-wrapper {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.content-wrapper .ts-control {
  min-height: 36px;
  border-color: var(--tblr-border-color);
  border-radius: 4px;
}

.ts-dropdown {
  z-index: 1060;
  background-color: var(--tblr-bg-surface, #fff);
  color: var(--tblr-body-color, #182433);
}

.ts-control .item,
.ts-dropdown .option {
  overflow-wrap: anywhere;
}

.ts-wrapper.single .ts-control {
  flex-wrap: nowrap;
}

.ts-wrapper.single .ts-control .item {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-wrapper.multi .ts-control > .item {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.ts-wrapper.multi .ts-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-wrapper.multi .item .remove {
  flex-shrink: 0;
}

.employee-profile .card {
  overflow: hidden;
  border-color: var(--tblr-border-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(32, 61, 96, .045);
}

.employee-profile-summary {
  border-left: 4px solid var(--tblr-primary) !important;
  background: linear-gradient(110deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.employee-profile-summary .card-body {
  padding: 1.4rem 1.6rem;
}

.employee-profile-avatar {
  flex: 0 0 auto;
  height: 5rem;
  object-fit: cover;
  width: 5rem;
}

.employee-profile-eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
  color: var(--tblr-primary);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.employee-profile-name {
  color: var(--tblr-body-color);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.employee-profile-employment {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}

.employee-profile-facts {
  font-size: .9rem;
}

.employee-profile-fact-label {
  margin-bottom: .2rem;
  color: var(--tblr-secondary);
  font-size: .8rem;
}

.employee-profile .card-header {
  background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-bg-surface) 72%);
}

.employee-profile .card-title {
  font-weight: 600;
}

.employee-profile-details > div {
  display: grid;
  grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.2fr);
  align-items: start;
  column-gap: 1rem;
}

.employee-profile-details dt {
  color: var(--tblr-secondary);
  font-weight: 600;
}

.employee-profile-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

@media (max-width: 767.98px) {
  .employee-profile-summary .card-body {
    padding: 1.2rem;
  }

  .employee-profile-name {
    font-size: 1.3rem;
  }
}

@media (max-width: 575.98px) {
  .employee-profile-details > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .25rem;
  }

  .employee-profile-details dd {
    text-align: left;
  }
}

@media (max-width: 767.98px) {
  .content-wrapper .card-actions {
    margin-left: 0;
    flex-wrap: wrap;
  }
}

.login-body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #081a36;
}

.login-experience {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
  padding: 2rem 1.25rem;
  background: linear-gradient(135deg, #07162f 0%, #0c2856 54%, #123c78 100%);
  color: #f4f8ff;
}

.login-background-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 25rem;
  padding: 2rem;
  border: 1px solid rgba(174, 204, 244, .2);
  border-radius: 8px;
  background: rgba(13, 31, 61, .88);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
  color: #f4f8ff;
  backdrop-filter: blur(16px);
}

.login-form-heading {
  margin-bottom: 1.75rem;
}

.login-form-heading h1 {
  margin-bottom: .4rem;
  color: #f4f8ff;
  font-size: 1.8rem;
  font-weight: 600;
}

.login-form-heading p {
  margin-bottom: 0;
  color: #b6c8e0;
}

.login-card .form-label,
.login-card .form-check-label {
  color: #e6efff;
}

.login-card .form-control {
  border-color: rgba(171, 198, 235, .25);
  background: rgba(255, 255, 255, .06);
  color: #f4f8ff;
}

.login-card .form-control:focus {
  border-color: #6ba7ec;
  box-shadow: 0 0 0 .2rem rgba(69, 139, 224, .2);
}

.login-card .form-control::placeholder {
  color: #a7bbd6;
}

.login-password-toggle {
  min-width: 4rem;
  border-color: rgba(171, 198, 235, .25);
  background: rgba(255, 255, 255, .06);
  color: #d8e6f8;
}

.login-password-toggle:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.login-card .btn-primary {
  border-color: #347bc7;
  background: #347bc7;
}

.login-card .btn-primary:hover {
  border-color: #438bd8;
  background: #438bd8;
}

.login-copyright {
  margin: 1.75rem 0 0;
  color: #9fb2cc;
  font-size: .8125rem;
  text-align: center;
}

@media (max-width: 767.98px) {
  .login-experience {
    align-items: start;
    min-height: 100vh;
    padding: 2rem 1rem;
  }

  .login-card {
    margin: auto 0;
    padding: 1.5rem;
  }
}

.contact-page {
  padding-bottom: 1rem;
}

.contact-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  background:
    radial-gradient(ellipse at 100% 0, rgba(var(--tblr-primary-rgb), .11), transparent 55%),
    var(--tblr-bg-surface);
}

.contact-intro-copy {
  min-width: 0;
}

.contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
  color: var(--tblr-primary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.contact-intro-copy p {
  margin: 0;
  color: var(--tblr-secondary);
}

.contact-add-button {
  flex: 0 0 auto;
  min-height: 2.65rem;
  padding-inline: 1.1rem;
  font-weight: 600;
}

.contact-search-section {
  margin-bottom: 1.5rem;
}

.contact-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}

.contact-section-heading h2 {
  margin: 0 0 .2rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.contact-section-heading p,
.contact-filter-heading p,
.contact-results-title p {
  margin: 0;
  color: var(--tblr-secondary);
  font-size: .875rem;
}

.contact-section-icon,
.contact-filter-icon,
.contact-results-icon,
.contact-empty-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: .65rem;
}

.contact-section-icon {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}

.contact-filter-card {
  overflow: hidden;
  border-radius: .5rem !important;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.contact-filter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(32, 61, 96, .09);
}

.contact-filter-heading {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1rem .85rem;
  border-bottom: 1px solid var(--tblr-border-color);
}

.contact-filter-heading h3 {
  margin: 0 0 .15rem;
  font-size: .98rem;
  font-weight: 700;
}

.contact-filter-heading p {
  font-size: .82rem;
}

.contact-filter-icon {
  width: 2.65rem;
  height: 2.65rem;
  font-size: 1.05rem;
}

.contact-filter-icon-blue {
  color: #3478c8;
  background: rgba(52, 120, 200, .12);
}

.contact-filter-icon-violet {
  color: #7654c8;
  background: rgba(118, 84, 200, .12);
}

.contact-filter-icon-green {
  color: #23875b;
  background: rgba(35, 135, 91, .12);
}

.contact-filter-card .card-body {
  display: flex;
  align-items: end;
  padding: 1rem;
}

.contact-filter-card form {
  width: 100%;
}

.contact-filter-card .form-label {
  margin-bottom: .45rem;
  font-size: .84rem;
  font-weight: 600;
}

.contact-filter-card .form-control,
.contact-filter-card .form-select {
  min-height: 2.65rem;
  border-radius: .4rem;
}

.contact-search-button {
  min-height: 2.5rem;
  padding-inline: 1rem;
  font-weight: 600;
}

.contact-results-card {
  overflow: hidden;
  border-radius: .5rem !important;
}

.contact-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
}

.contact-results-title {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.contact-results-title .card-title {
  margin-bottom: .15rem;
  font-size: 1rem;
  font-weight: 700;
}

.contact-results-title p {
  font-size: .82rem;
}

.contact-results-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}

.contact-count {
  display: inline-flex;
  align-items: center;
  padding: .4rem .7rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 2rem;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-secondary);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.contact-table-scroll {
  max-width: 100%;
}

.contact-table {
  min-width: 1350px;
  margin-bottom: 0;
  font-size: .84rem;
}

.contact-table th,
.contact-table td {
  padding: .8rem .85rem;
  border-color: var(--tblr-border-color);
  vertical-align: middle;
}

.contact-table thead th {
  background: var(--tblr-bg-surface-secondary);
  font-size: .74rem !important;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.contact-table tbody tr:hover {
  background: var(--tblr-bg-surface-secondary);
}

.contact-table th:first-child,
.contact-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  background: var(--tblr-bg-surface);
  box-shadow: 1px 0 0 var(--tblr-border-color);
}

.contact-table thead th:first-child {
  z-index: 5;
  background: var(--tblr-bg-surface-secondary);
}

.contact-table th:last-child,
.contact-table td:last-child {
  position: sticky;
  right: 0;
  width: 82px;
  min-width: 82px;
  max-width: 82px;
  background: var(--tblr-bg-surface);
  box-shadow: -1px 0 0 var(--tblr-border-color);
}

.contact-table tbody td:last-child {
  z-index: 2;
}

.contact-table thead th:last-child {
  z-index: 6;
  background: var(--tblr-bg-surface-secondary);
}

.contact-table tbody tr:hover td:first-child,
.contact-table tbody tr:hover td:last-child {
  background: var(--tblr-bg-surface-secondary);
}

.contact-employee-name {
  color: var(--tblr-body-color);
  font-weight: 650;
}

.contact-work-code {
  display: inline-block;
  padding: .2rem .45rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .3rem;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-secondary);
  font-size: .77rem;
  font-weight: 600;
}

.contact-edit-button {
  padding-inline: .65rem;
  font-weight: 600;
}

.contact-empty-state {
  padding: 2.5rem 1rem;
  text-align: center;
}

.contact-empty-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: .8rem;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
  font-size: 1.2rem;
}

.contact-empty-state h3 {
  margin: 0 0 .3rem;
  font-size: 1rem;
  font-weight: 700;
}

.contact-empty-state p {
  margin: 0;
  color: var(--tblr-secondary);
}

@media (max-width: 575.98px) {
  .contact-intro {
    align-items: stretch;
    flex-direction: column;
    padding: 1rem;
  }

  .contact-add-button {
    width: 100%;
  }

  .contact-results-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

.employee-directory {
  padding-bottom: 1rem;
}

.employee-directory-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  background:
    radial-gradient(ellipse at 100% 0, rgba(var(--tblr-primary-rgb), .11), transparent 55%),
    var(--tblr-bg-surface);
}

.employee-directory-intro-copy p {
  margin: 0;
  color: var(--tblr-secondary);
}

.employee-directory-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
  color: var(--tblr-primary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.employee-add-button {
  flex: 0 0 auto;
  min-height: 2.65rem;
  padding-inline: 1.1rem;
  font-weight: 600;
}

.employee-search-section {
  margin-bottom: 1.5rem;
}

.employee-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}

.employee-section-heading h2 {
  margin: 0 0 .2rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.employee-section-heading p,
.employee-filter-heading p,
.employee-results-title p {
  margin: 0;
  color: var(--tblr-secondary);
  font-size: .875rem;
}

.employee-section-icon,
.employee-filter-icon,
.employee-results-icon,
.employee-empty-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: .65rem;
}

.employee-section-icon {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}

.employee-filter-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: .85rem;
}

@media (min-width: 640px) {
  .employee-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .employee-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .employee-filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.employee-filter-card {
  overflow: hidden;
  border-radius: .5rem !important;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.employee-filter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(32, 61, 96, .09);
}

.employee-filter-heading {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem .9rem;
  border-bottom: 1px solid var(--tblr-border-color);
}

.employee-filter-heading h3 {
  margin: 0 0 .15rem;
  font-size: .94rem;
  font-weight: 700;
}

.employee-filter-heading p {
  font-size: .77rem;
}

.employee-filter-icon {
  width: 2.35rem;
  height: 2.35rem;
  font-size: .95rem;
}

.employee-filter-icon-blue {
  color: #3478c8;
  background: rgba(52, 120, 200, .12);
}

.employee-filter-icon-violet {
  color: #7654c8;
  background: rgba(118, 84, 200, .12);
}

.employee-filter-icon-green {
  color: #23875b;
  background: rgba(35, 135, 91, .12);
}

.employee-filter-icon-rose {
  color: #c34f69;
  background: rgba(195, 79, 105, .12);
}

.employee-filter-icon-amber {
  color: #a66a0a;
  background: rgba(214, 153, 48, .15);
}

.employee-filter-card .card-body {
  display: flex;
  align-items: end;
  padding: .9rem;
}

.employee-filter-card form {
  width: 100%;
}

.employee-filter-card .form-label {
  margin-bottom: .4rem;
  font-size: .8rem;
  font-weight: 600;
}

.employee-filter-card .form-control,
.employee-filter-card .form-select {
  min-height: 2.55rem;
  border-radius: .4rem;
}

.employee-search-button {
  min-height: 2.4rem;
  padding-inline: .75rem;
  font-size: .8rem;
  font-weight: 600;
}

.employee-results-card {
  overflow: hidden;
  border-radius: .5rem !important;
}

.employee-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
}

.employee-results-title {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.employee-results-title .card-title {
  margin-bottom: .15rem;
  font-size: 1rem;
  font-weight: 700;
}

.employee-results-title p {
  font-size: .82rem;
}

.employee-results-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}

.employee-count {
  display: inline-flex;
  align-items: center;
  padding: .4rem .7rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 2rem;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-secondary);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.employee-table-scroll {
  max-width: 100%;
}

.employee-table {
  min-width: 1500px;
  margin-bottom: 0;
  font-size: .83rem;
}

.employee-table th,
.employee-table td {
  padding: .75rem .8rem;
  border-color: var(--tblr-border-color);
  vertical-align: middle;
}

.employee-table thead th {
  background: var(--tblr-bg-surface-secondary);
  font-size: .73rem !important;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.employee-table tbody tr:hover {
  background: var(--tblr-bg-surface-secondary);
}

.employee-avatar {
  border: 1px solid var(--tblr-border-color);
  border-radius: .55rem;
  object-fit: cover;
}

.employee-work-code {
  display: inline-block;
  padding: .2rem .45rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .3rem;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-secondary);
  font-size: .77rem;
  font-weight: 600;
}

.employee-name {
  color: var(--tblr-body-color);
  font-weight: 650;
}

.employee-row-actions {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.employee-row-actions .btn {
  font-weight: 600;
}

.employee-table th:first-child,
.employee-table td:first-child,
.employee-table th:nth-child(2),
.employee-table td:nth-child(2),
.employee-table th:nth-child(3),
.employee-table td:nth-child(3),
.employee-table th:last-child,
.employee-table td:last-child {
  position: sticky;
  background: var(--tblr-bg-surface);
}

.employee-table th:first-child,
.employee-table td:first-child {
  left: 0;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
}

.employee-table th:nth-child(2),
.employee-table td:nth-child(2) {
  left: 64px;
  width: 104px;
  min-width: 104px;
  max-width: 104px;
}

.employee-table th:nth-child(3),
.employee-table td:nth-child(3) {
  left: 168px;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.employee-table tbody td:first-child,
.employee-table tbody td:nth-child(2),
.employee-table tbody td:nth-child(3) {
  z-index: 3;
}

.employee-table thead th:first-child,
.employee-table thead th:nth-child(2),
.employee-table thead th:nth-child(3) {
  z-index: 5;
  background: var(--tblr-bg-surface-secondary);
}

.employee-table th:last-child,
.employee-table td:last-child {
  right: 0;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  box-shadow: -1px 0 0 var(--tblr-border-color);
}

.employee-table tbody td:last-child {
  z-index: 2;
}

.employee-table thead th:last-child {
  z-index: 6;
  background: var(--tblr-bg-surface-secondary);
}

.employee-empty-state {
  padding: 2.5rem 1rem;
  text-align: center;
}

.employee-empty-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: .8rem;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
  font-size: 1.2rem;
}

.employee-empty-state h3 {
  margin: 0 0 .3rem;
  font-size: 1rem;
  font-weight: 700;
}

.employee-empty-state p {
  margin: 0;
  color: var(--tblr-secondary);
}

@media (max-width: 575.98px) {
  .employee-directory-intro {
    align-items: stretch;
    flex-direction: column;
    padding: 1rem;
  }

  .employee-add-button {
    width: 100%;
  }

  .employee-results-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

.employee-dashboard {
  padding-bottom: 1rem;
}

.employee-dashboard-intro {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  background:
    radial-gradient(ellipse at 100% 0, rgba(var(--tblr-primary-rgb), .1), transparent 55%),
    var(--tblr-bg-surface);
}

.employee-dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
  color: var(--tblr-primary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.employee-dashboard-intro p {
  margin: 0;
  color: var(--tblr-secondary);
}

.employee-dashboard-team-counts .card,
.employee-dashboard-departments,
.employee-dashboard-resignations {
  overflow: hidden;
  border-radius: .5rem !important;
}

.employee-dashboard-stat {
  border-top: 3px solid transparent;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.employee-dashboard-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(32, 61, 96, .09);
}

.employee-dashboard-stat-blue {
  border-top-color: #3478c8;
}

.employee-dashboard-stat-violet {
  border-top-color: #7654c8;
}

.employee-dashboard-stat-green {
  border-top-color: #23875b;
}

.employee-dashboard-stat-icon {
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}

.employee-dashboard-stat-label {
  color: var(--tblr-secondary);
  font-size: .875rem;
  font-weight: 600;
}

.employee-dashboard-stat-value {
  margin-top: .15rem;
  color: var(--tblr-body-color);
  font-weight: 750;
}

.employee-dashboard-panels > [class*="col-"] {
  min-width: 0;
}

.employee-dashboard-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem;
}

.employee-dashboard-panel-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: .7rem;
}

.employee-dashboard-panel-title .card-title {
  margin-bottom: .12rem;
  font-size: .98rem;
  font-weight: 700;
}

.employee-dashboard-panel-title p {
  margin: 0;
  color: var(--tblr-secondary);
  font-size: .8rem;
}

.employee-dashboard-panel-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: .6rem;
}

.employee-dashboard-department-icon {
  color: #7654c8;
  background: rgba(118, 84, 200, .12);
}

.employee-dashboard-resign-icon {
  color: #c34f69;
  background: rgba(195, 79, 105, .12);
}

.employee-dashboard-total-badge {
  flex: 0 0 auto;
  padding: .35rem .6rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 2rem;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-secondary);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.employee-dashboard-department-scroll {
  max-height: min(66vh, 640px);
  overflow: auto;
}

.employee-dashboard-department-table,
.employee-dashboard-resign-table {
  margin-bottom: 0;
}

.employee-dashboard-department-table td,
.employee-dashboard-department-table th {
  padding: .65rem .9rem;
  border-color: var(--tblr-border-color);
}

.employee-dashboard-department-table td:first-child {
  color: var(--tblr-body-color);
}

.employee-dashboard-department-dot {
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-right: .65rem;
  border-radius: 50%;
  background: var(--tblr-primary);
  vertical-align: .08em;
}

.employee-dashboard-department-table tfoot {
  position: sticky;
  bottom: 0;
  background: var(--tblr-bg-surface);
  box-shadow: 0 -1px 0 var(--tblr-border-color);
}

.employee-dashboard-resign-scroll {
  max-height: min(66vh, 640px);
}

.employee-dashboard-resign-table {
  min-width: 1120px;
  font-size: .81rem;
}

.employee-dashboard-resign-table th,
.employee-dashboard-resign-table td {
  padding: .7rem .75rem;
  border-color: var(--tblr-border-color);
  vertical-align: middle;
}

.employee-dashboard-resign-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-secondary);
  font-size: .72rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.employee-dashboard-resign-table tbody tr:hover {
  background: var(--tblr-bg-surface-secondary);
}

.employee-dashboard-resign-name {
  color: var(--tblr-body-color);
  font-weight: 650;
}

.employee-dashboard-work-code {
  display: inline-block;
  padding: .2rem .45rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .3rem;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-secondary);
  font-size: .75rem;
  font-weight: 600;
}

.employee-dashboard-empty {
  padding: 2rem 1rem;
  color: var(--tblr-secondary);
  text-align: center;
}

@media (max-width: 575.98px) {
  .employee-dashboard-intro {
    padding: 1rem;
  }

  .employee-dashboard-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

.severance-directory {
  padding-bottom: 1rem;
}

.severance-directory-intro {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  background:
    radial-gradient(ellipse at 100% 0, rgba(195, 79, 105, .1), transparent 55%),
    var(--tblr-bg-surface);
}

.severance-directory-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
  color: #c34f69;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.severance-directory-intro p {
  margin: 0;
  color: var(--tblr-secondary);
}

.severance-search-section {
  margin-bottom: 1.5rem;
}

@media (max-width: 575.98px) {
  .severance-directory-intro {
    padding: 1rem;
  }
}

.identity-directory {
  padding-bottom: 1rem;
}

.identity-directory-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  background:
    radial-gradient(ellipse at 100% 0, rgba(var(--tblr-primary-rgb), .11), transparent 55%),
    var(--tblr-bg-surface);
}

.identity-directory-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
  color: var(--tblr-primary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.identity-directory-intro p {
  margin: 0;
  color: var(--tblr-secondary);
}

.identity-search-section {
  margin-bottom: 1.5rem;
}

.identity-results-card {
  overflow: hidden;
  border-radius: .5rem !important;
}

.identity-table-scroll {
  max-width: 100%;
}

.identity-table {
  min-width: 1900px;
  margin-bottom: 0;
  font-size: .82rem;
}

.identity-table th,
.identity-table td {
  padding: .75rem .8rem;
  border-color: var(--tblr-border-color);
  vertical-align: middle;
}

.identity-table thead th {
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-secondary);
  font-size: .72rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.identity-table tbody tr:hover {
  background: var(--tblr-bg-surface-secondary);
}

.identity-table th:first-child,
.identity-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  background: var(--tblr-bg-surface);
  box-shadow: 1px 0 0 var(--tblr-border-color);
}

.identity-table thead th:first-child {
  z-index: 5;
  background: var(--tblr-bg-surface-secondary);
}

.identity-table th:last-child,
.identity-table td:last-child {
  position: sticky;
  right: 0;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  background: var(--tblr-bg-surface);
  box-shadow: -1px 0 0 var(--tblr-border-color);
}

.identity-table tbody td:last-child {
  z-index: 2;
}

.identity-table thead th:last-child {
  z-index: 6;
  background: var(--tblr-bg-surface-secondary);
}

.identity-table tbody tr:hover td:first-child,
.identity-table tbody tr:hover td:last-child {
  background: var(--tblr-bg-surface-secondary);
}

@media (max-width: 575.98px) {
  .identity-directory-intro {
    align-items: stretch;
    flex-direction: column;
    padding: 1rem;
  }

  .identity-directory-intro .employee-add-button {
    width: 100%;
  }
}

.education-directory {
  padding-bottom: 1rem;
}

.education-directory-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  background:
    radial-gradient(ellipse at 100% 0, rgba(118, 84, 200, .11), transparent 55%),
    var(--tblr-bg-surface);
}

.education-directory-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
  color: #7654c8;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.education-directory-intro p {
  margin: 0;
  color: var(--tblr-secondary);
}

.education-search-section {
  margin-bottom: 1.5rem;
}

.education-results-card {
  overflow: hidden;
  border-radius: .5rem !important;
}

.education-table-scroll {
  max-width: 100%;
}

.education-table {
  min-width: 1250px;
  margin-bottom: 0;
  font-size: .83rem;
}

.education-table th,
.education-table td {
  padding: .75rem .8rem;
  border-color: var(--tblr-border-color);
  vertical-align: middle;
}

.education-table thead th {
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-secondary);
  font-size: .73rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.education-table tbody tr:hover {
  background: var(--tblr-bg-surface-secondary);
}

.employee-row-edit {
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .education-directory-intro {
    align-items: stretch;
    flex-direction: column;
    padding: 1rem;
  }

  .education-directory-intro .employee-add-button {
    width: 100%;
  }
}

.experience-directory {
  padding-bottom: 1rem;
}

.experience-directory-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  background:
    radial-gradient(ellipse at 100% 0, rgba(35, 135, 91, .11), transparent 55%),
    var(--tblr-bg-surface);
}

.experience-directory-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
  color: #23875b;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.experience-directory-intro p {
  margin: 0;
  color: var(--tblr-secondary);
}

.experience-search-section {
  margin-bottom: 1.5rem;
}

.experience-results-card {
  overflow: hidden;
  border-radius: .5rem !important;
}

.experience-table-scroll {
  max-width: 100%;
}

.experience-table {
  min-width: 1500px;
  margin-bottom: 0;
  font-size: .82rem;
}

.experience-table th,
.experience-table td {
  padding: .75rem .8rem;
  border-color: var(--tblr-border-color);
  vertical-align: middle;
}

.experience-table thead th {
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-secondary);
  font-size: .72rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.experience-table tbody tr:hover {
  background: var(--tblr-bg-surface-secondary);
}

@media (max-width: 575.98px) {
  .experience-directory-intro {
    align-items: stretch;
    flex-direction: column;
    padding: 1rem;
  }

  .experience-directory-intro .employee-add-button {
    width: 100%;
  }
}

.employee-profile-manager {
  padding-bottom: 1rem;
}

.employee-profile-manager-intro {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  background:
    radial-gradient(ellipse at 100% 0, rgba(var(--tblr-primary-rgb), .11), transparent 55%),
    var(--tblr-bg-surface);
}

.employee-profile-manager-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: .65rem;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
  font-size: 1.1rem;
}

.employee-profile-manager-eyebrow {
  display: block;
  margin-bottom: .2rem;
  color: var(--tblr-primary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.employee-profile-manager-intro p {
  margin: 0;
  color: var(--tblr-secondary);
  font-size: .875rem;
}

.employee-profile-selector {
  overflow: visible !important;
  border-radius: .5rem !important;
}

.employee-profile-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.employee-profile-manager-header .card-title {
  margin-bottom: .2rem;
  font-weight: 700;
}

.employee-profile-manager-header p,
.employee-profile-panel-heading p {
  margin: 0;
  color: var(--tblr-secondary);
  font-size: .84rem;
}

.employee-profile-select-wrap {
  max-width: 720px;
}

.employee-profile-select-wrap .form-label {
  font-weight: 600;
}

.employee-profile-select-wrap .form-select {
  min-height: 2.8rem;
}

.employee-profile-panel {
  margin-top: 1.25rem;
}

.employee-profile-panel-heading {
  margin-bottom: .75rem;
}

.employee-profile-panel-heading h2 {
  margin: 0 0 .2rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.employee-profile-manager-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: .35rem;
  overflow-x: auto;
  padding: .45rem .45rem 0;
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem .5rem 0 0;
  background: var(--tblr-bg-surface);
  scrollbar-width: thin;
}

.employee-profile-manager-tabs .nav-item {
  flex: 0 0 auto;
}

.employee-profile-manager-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem .85rem;
  border-radius: .4rem .4rem 0 0;
  color: var(--tblr-secondary);
  font-weight: 600;
  white-space: nowrap;
}

.employee-profile-manager-tabs .nav-link:hover {
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}

.employee-profile-manager-tabs .nav-link.active {
  color: var(--tblr-primary);
  background: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color) var(--tblr-border-color) var(--tblr-bg-surface);
}

.employee-profile-manager-content {
  min-height: 180px;
  padding: 1rem;
  border: 1px solid var(--tblr-border-color);
  border-top: 0;
  border-radius: 0 0 .5rem .5rem;
  background: var(--tblr-bg-surface);
  box-shadow: 0 1px 2px rgba(32, 61, 96, .035);
}

@media (max-width: 575.98px) {
  .employee-profile-manager-intro {
    align-items: flex-start;
    padding: 1rem;
  }

  .employee-profile-manager-content {
    padding: .75rem;
  }
}

.missing-data-directory {
  padding-bottom: 1rem;
}

.missing-data-intro {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(195, 79, 105, .22);
  border-radius: .5rem;
  background:
    radial-gradient(ellipse at 100% 0, rgba(195, 79, 105, .1), transparent 55%),
    var(--tblr-bg-surface);
}

.missing-data-intro-icon,
.missing-data-results-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: .65rem;
  color: #c34f69;
  background: rgba(195, 79, 105, .12);
}

.missing-data-eyebrow {
  display: block;
  margin-bottom: .2rem;
  color: #c34f69;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.missing-data-intro p {
  margin: 0;
  color: var(--tblr-secondary);
  font-size: .875rem;
}

.missing-data-total {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: .4rem .7rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 2rem;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-secondary);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.missing-data-search-section {
  margin-bottom: 1.5rem;
}

.missing-data-results-card {
  overflow: hidden;
  border-radius: .5rem !important;
}

.missing-data-table-scroll {
  max-width: 100%;
}

.missing-data-table {
  min-width: 1350px;
  margin-bottom: 0;
  font-size: .82rem;
}

.missing-data-table th,
.missing-data-table td {
  padding: .75rem .8rem;
  border-color: var(--tblr-border-color);
  vertical-align: middle;
}

.missing-data-table thead th {
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-secondary);
  font-size: .72rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.missing-data-table tbody tr:hover {
  background: var(--tblr-bg-surface-secondary);
}

@media (max-width: 575.98px) {
  .missing-data-intro {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 1rem;
  }

  .missing-data-total {
    margin-left: 3.5rem;
  }
}

.letter-generator {
  padding-bottom: 1rem;
}

.letter-generator-intro {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  background:
    radial-gradient(ellipse at 100% 0, rgba(var(--tblr-primary-rgb), .11), transparent 55%),
    var(--tblr-bg-surface);
}

.letter-generator-intro-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: .65rem;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}

.letter-generator-eyebrow {
  display: block;
  margin-bottom: .2rem;
  color: var(--tblr-primary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.letter-generator-intro p {
  margin: 0;
  color: var(--tblr-secondary);
  font-size: .875rem;
}

.letter-employee-selector,
.letter-employee-card {
  overflow: hidden;
  border-radius: .5rem !important;
}

.letter-employee-selector {
  max-width: 760px;
}

.letter-employee-selector .card-body {
  padding: 1rem;
}

.letter-employee-select {
  max-width: 560px;
}

.letter-employee-select .form-label {
  font-weight: 600;
}

.letter-employee-select .form-select {
  min-height: 2.75rem;
}

.letter-result:not(:empty) {
  margin-top: 1.25rem;
}

.letter-employee-card {
  margin-bottom: 1.25rem !important;
}

.letter-employee-table-scroll {
  max-width: 100%;
}

.letter-employee-table {
  min-width: 1200px;
  margin-bottom: 0;
  font-size: .82rem;
}

.letter-employee-table th,
.letter-employee-table td {
  padding: .75rem .8rem;
  border-color: var(--tblr-border-color);
  vertical-align: middle;
}

.letter-employee-table thead th {
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-secondary);
  font-size: .72rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.letter-options-heading {
  margin-bottom: .75rem;
}

.letter-options-heading h2 {
  margin: 0 0 .2rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.letter-options-heading p {
  margin: 0;
  color: var(--tblr-secondary);
  font-size: .84rem;
}

.letter-option-card {
  display: flex;
  align-items: center;
  min-height: 5.5rem;
  gap: .75rem;
  padding: .9rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  color: var(--tblr-body-color);
  background: var(--tblr-bg-surface);
  box-shadow: 0 1px 2px rgba(32, 61, 96, .035);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.letter-option-card:hover {
  transform: translateY(-2px);
  border-color: var(--tblr-primary);
  color: var(--tblr-body-color);
  box-shadow: 0 8px 22px rgba(32, 61, 96, .09);
}

.letter-option-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: .6rem;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
  font-size: 1.05rem;
}

.letter-option-coc .letter-option-icon {
  color: #c34f69;
  background: rgba(195, 79, 105, .12);
}

.letter-option-experience .letter-option-icon {
  color: #23875b;
  background: rgba(35, 135, 91, .12);
}

.letter-option-copy {
  display: grid;
  min-width: 0;
  gap: .2rem;
}

.letter-option-copy strong {
  font-size: .88rem;
}

.letter-option-copy small {
  color: var(--tblr-secondary);
  font-size: .77rem;
}

.letter-option-arrow {
  margin-left: auto;
  color: var(--tblr-secondary);
}

@media (max-width: 575.98px) {
  .letter-generator-intro {
    align-items: flex-start;
    padding: 1rem;
  }
}

.hr-setting-page {
  padding-bottom: 1rem;
}

.hr-setting-intro {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: .5rem;
  background:
    radial-gradient(ellipse at 100% 0, rgba(var(--tblr-primary-rgb), .1), transparent 55%),
    var(--tblr-bg-surface);
}

.hr-setting-intro-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: .65rem;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
  font-size: 1.05rem;
}

.hr-setting-tone-work .hr-setting-intro-icon {
  color: #7654c8;
  background: rgba(118, 84, 200, .12);
}

.hr-setting-tone-profile .hr-setting-intro-icon {
  color: #3478c8;
  background: rgba(52, 120, 200, .12);
}

.hr-setting-tone-health .hr-setting-intro-icon {
  color: #c34f69;
  background: rgba(195, 79, 105, .12);
}

.hr-setting-tone-team .hr-setting-intro-icon {
  color: #23875b;
  background: rgba(35, 135, 91, .12);
}

.hr-setting-tone-org .hr-setting-intro-icon {
  color: #3478c8;
  background: rgba(52, 120, 200, .12);
}

.hr-setting-tone-finance .hr-setting-intro-icon {
  color: #23875b;
  background: rgba(35, 135, 91, .12);
}

.hr-setting-intro-copy {
  min-width: 0;
}

.hr-setting-eyebrow {
  display: block;
  margin-bottom: .2rem;
  color: var(--tblr-primary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.hr-setting-intro-copy p {
  margin: 0;
  color: var(--tblr-secondary);
  font-size: .875rem;
}

.hr-setting-intro-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  margin-left: auto;
}

.hr-setting-intro-actions .btn {
  flex: 0 0 auto;
  min-height: 2.45rem;
  font-weight: 600;
}

.hr-setting-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .4rem .65rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 2rem;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-secondary);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

.hr-setting-member-count {
  min-width: 2.2rem;
}

.hr-setting-card {
  overflow: hidden;
  border-radius: .5rem !important;
}

.hr-setting-card-header {
  min-height: 4rem;
}

.hr-setting-card-header .card-title {
  margin-bottom: .15rem;
  font-size: 1rem;
  font-weight: 700;
}

.hr-setting-card-header p {
  margin: 0;
  color: var(--tblr-secondary);
  font-size: .82rem;
}

.hr-setting-table {
  min-width: 520px;
  margin-bottom: 0;
}

.hr-setting-table th,
.hr-setting-table td {
  padding: .75rem 1rem;
  border-color: var(--tblr-border-color);
  vertical-align: middle;
}

.hr-setting-table thead th {
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-secondary);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hr-setting-table tbody tr:hover {
  background: var(--tblr-bg-surface-secondary);
}

.hr-setting-table .btn {
  min-width: 3.25rem;
  font-weight: 600;
}

.hr-setting-record-name {
  color: var(--tblr-body-color);
  font-weight: 600;
}

.hr-setting-empty {
  padding: 2.5rem 1rem;
  color: var(--tblr-secondary);
  text-align: center;
}

.hr-setting-empty > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: .75rem;
  border-radius: .65rem;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
  font-size: 1.2rem;
}

.hr-setting-empty h3 {
  margin: 0 0 .3rem;
  color: var(--tblr-body-color);
  font-size: 1rem;
  font-weight: 700;
}

.hr-setting-empty p {
  margin: 0;
  font-size: .86rem;
}

@media (max-width: 767.98px) {
  .hr-setting-intro {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 1rem;
  }

  .hr-setting-intro-actions {
    width: 100%;
    justify-content: space-between;
    margin-left: 3.7rem;
  }
}

@media (max-width: 420px) {
  .hr-setting-intro-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hr-setting-intro-actions .btn {
    width: 100%;
  }
}

@media (hover: hover) {
  .employee-table tbody tr:hover td:first-child,
  .employee-table tbody tr:hover td:nth-child(2),
  .employee-table tbody tr:hover td:nth-child(3),
  .employee-table tbody tr:hover td:last-child {
    background: var(--tblr-bg-surface-secondary);
  }
}

.trainee-search-card,
.trainee-results-header,
.trainee-table,
.trainee-photo-preview {
  border-color: var(--tblr-border-color);
}

.trainee-search-card {
  overflow: hidden;
  border-radius: .5rem;
}

.trainee-search-card .card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem 1.15rem;
}

.trainee-search-copy {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.trainee-search-copy h2,
.trainee-results-header .card-title {
  margin: 0 0 .2rem;
  font-size: 1rem;
  font-weight: 700;
}

.trainee-search-copy p,
.trainee-results-header p,
.trainee-form-intro {
  margin: 0;
  color: var(--tblr-secondary);
  font-size: .85rem;
}

.trainee-section-icon,
.trainee-empty-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: .65rem;
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}

.trainee-section-icon-paid,
.trainee-empty-icon-paid {
  color: #23875b;
  background: rgba(35, 135, 91, .12);
}

.trainee-search-form {
  width: min(100%, 28rem);
}

.trainee-search-form .form-control,
.trainee-search-form .btn {
  min-height: 2.65rem;
}

.trainee-results-header {
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.trainee-table {
  min-width: 900px;
  margin-bottom: 0;
}

.trainee-paid-table {
  min-width: 1320px;
}

.trainee-table-scroll {
  max-height: 55vh;
  overflow: auto;
  overscroll-behavior: contain;
}

.trainee-table th,
.trainee-table td {
  padding: .7rem .8rem;
  vertical-align: middle;
}

.trainee-table .trainee-sticky-employee,
.trainee-table .trainee-sticky-action {
  position: sticky;
  z-index: 2;
  background: var(--tblr-bg-surface);
}

.trainee-table .trainee-sticky-employee {
  left: 0;
  min-width: 235px;
  box-shadow: 1px 0 0 var(--tblr-border-color);
}

.trainee-table .trainee-sticky-action {
  right: 0;
  min-width: 88px;
  box-shadow: -1px 0 0 var(--tblr-border-color);
}

.trainee-table thead .trainee-sticky-employee,
.trainee-table thead .trainee-sticky-action {
  z-index: 5;
  background: var(--tblr-bg-surface-secondary);
}

.trainee-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-secondary);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.trainee-table tbody tr:hover {
  background: var(--tblr-bg-surface-secondary);
}

.trainee-table tbody tr:hover .trainee-sticky-employee,
.trainee-table tbody tr:hover .trainee-sticky-action {
  background: var(--tblr-bg-surface-secondary);
}

.trainee-avatar {
  border: 1px solid var(--tblr-border-color);
  object-fit: cover;
}

.trainee-image-trigger {
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: zoom-in;
}

.trainee-image-trigger:focus-visible {
  outline: 2px solid var(--tblr-primary);
  outline-offset: 3px;
}

.trainee-image-modal-preview {
  display: block;
  max-width: 100%;
  max-height: 75vh;
  margin: 0 auto;
  object-fit: contain;
}

.trainee-identity {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 190px;
}

.trainee-identity > a,
.trainee-identity > img {
  flex: 0 0 auto;
}

.trainee-name {
  color: var(--tblr-body-color);
  font-weight: 650;
}

.trainee-remarks {
  min-width: 140px;
  max-width: 240px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.trainee-empty-state {
  padding: 2.25rem 1rem;
  text-align: center;
}

.trainee-empty-icon {
  margin-bottom: .8rem;
  font-size: 1.15rem;
}

.trainee-empty-state h3 {
  margin: 0 0 .3rem;
  font-size: 1rem;
  font-weight: 700;
}

.trainee-empty-state p {
  margin: 0;
  color: var(--tblr-secondary);
}

.trainee-form-intro {
  margin-top: .25rem;
}

.trainee-photo-preview {
  text-align: center;
}

.trainee-photo-image {
  max-height: 220px;
  object-fit: cover;
}

@media (max-width: 575.98px) {
  .trainee-search-card .card-body {
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
  }

  .trainee-search-form {
    width: 100%;
  }

  .trainee-results-header {
    align-items: flex-start;
    flex-direction: column;
  }
}