/* Load setelah spark.css — fix scroll tabel lebar di layout Spark (.wrapper overflow:hidden) */

.main > .content,
.content > .container-fluid,
.content .card,
.content .card-body {
  min-width: 0;
  max-width: 100%;
}

.table-scroll,
.table-responsive.table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table,
.table-scroll > .table {
  width: max-content !important;
  min-width: 100%;
  margin-bottom: 0;
  table-layout: auto;
}

.table-scroll th,
.table-scroll td,
.table-scroll .table th,
.table-scroll .table td {
  white-space: nowrap !important;
}

.table-scroll .wo-sticky-1,
.table-scroll .wo-sticky-2,
.table-scroll .wo-sticky-3 {
  position: sticky;
  z-index: 4;
  background-clip: border-box;
}

.table-scroll thead .wo-sticky-1,
.table-scroll thead .wo-sticky-2,
.table-scroll thead .wo-sticky-3 {
  z-index: 6;
  background-color: #f8f9fa !important;
}

.table-scroll .wo-sticky-cols-2 tbody .wo-sticky-1,
.table-scroll .wo-sticky-cols-2 tbody .wo-sticky-2,
.table-scroll .wo-sticky-cols-3 tbody .wo-sticky-1,
.table-scroll .wo-sticky-cols-3 tbody .wo-sticky-2,
.table-scroll .wo-sticky-cols-3 tbody .wo-sticky-3,
.table-scroll .emp-sticky-cols-2 tbody .wo-sticky-1,
.table-scroll .emp-sticky-cols-2 tbody .wo-sticky-2 {
  background-color: #fff !important;
}

.table-scroll .wo-sticky-cols-2.table-striped > tbody > tr:nth-of-type(odd) > .wo-sticky-1,
.table-scroll .wo-sticky-cols-2.table-striped > tbody > tr:nth-of-type(odd) > .wo-sticky-2,
.table-scroll .wo-sticky-cols-3.table-striped > tbody > tr:nth-of-type(odd) > .wo-sticky-1,
.table-scroll .wo-sticky-cols-3.table-striped > tbody > tr:nth-of-type(odd) > .wo-sticky-2,
.table-scroll .wo-sticky-cols-3.table-striped > tbody > tr:nth-of-type(odd) > .wo-sticky-3,
.table-scroll .emp-sticky-cols-2.table-striped > tbody > tr:nth-of-type(odd) > .wo-sticky-1,
.table-scroll .emp-sticky-cols-2.table-striped > tbody > tr:nth-of-type(odd) > .wo-sticky-2 {
  background-color: #f2f2f2 !important;
}

/* List WO: 3 kolom teks, lebar tetap supaya freeze rapat */
.table-scroll .wo-sticky-cols-3 .wo-sticky-1,
.table-scroll .wo-sticky-cols-3 .wo-sticky-2,
.table-scroll .wo-sticky-cols-3 .wo-sticky-3 {
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-scroll .wo-sticky-cols-3 .wo-sticky-1 {
  left: 0;
  width: 12rem;
  min-width: 12rem;
  max-width: 12rem;
}

.table-scroll .wo-sticky-cols-3 .wo-sticky-2 {
  left: 12rem;
  width: 9rem;
  min-width: 9rem;
  max-width: 9rem;
}

.table-scroll .wo-sticky-cols-3 .wo-sticky-3 {
  left: 21rem;
  width: 14rem;
  min-width: 14rem;
  max-width: 14rem;
  box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.18);
}

/* Direct approval: Action + Nama */
.table-scroll .wo-sticky-cols-2 .wo-sticky-1 {
  left: 0;
  min-width: 16rem;
}

.table-scroll .wo-sticky-cols-2 .wo-sticky-2 {
  left: 16rem;
  min-width: 12rem;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.18);
}

/* Retired employees: freeze No + Full name + Employee Census, keep row colors */
.table-scroll .emp-sticky-cols-3 > :not(caption) > * > * {
  --bs-table-bg-type: initial;
  --bs-table-accent-bg: transparent;
  box-shadow: none;
}

.table-scroll .emp-sticky-cols-3 .wo-sticky-1,
.table-scroll .emp-sticky-cols-3 .wo-sticky-2,
.table-scroll .emp-sticky-cols-3 .wo-sticky-3 {
  overflow: hidden;
}

.table-scroll .emp-sticky-cols-3 .wo-sticky-1 {
  left: 0;
  width: 4rem;
  min-width: 4rem;
  max-width: 4rem;
}

.table-scroll .emp-sticky-cols-3 .wo-sticky-2 {
  left: 4rem;
  width: 18rem;
  min-width: 18rem;
  max-width: 18rem;
}

.table-scroll .emp-sticky-cols-3 .wo-sticky-3 {
  left: 22rem;
  width: 11rem;
  min-width: 11rem;
  max-width: 11rem;
  white-space: normal !important;
  box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.18);
}

/* Employee active: freeze Full name + Employee Census */
.table-scroll .emp-sticky-cols-2 .wo-sticky-1,
.table-scroll .emp-sticky-cols-2 .wo-sticky-2 {
  overflow: hidden;
}

.table-scroll .emp-sticky-cols-2 .wo-sticky-1 {
  left: 0;
  width: 18rem;
  min-width: 18rem;
  max-width: 18rem;
}

.table-scroll .emp-sticky-cols-2 .wo-sticky-2 {
  left: 18rem;
  width: 11rem;
  min-width: 11rem;
  max-width: 11rem;
  white-space: normal !important;
  box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.18);
}

/* Attendance sales: freeze Area + Name, keep Off/IF row colors */
.table-scroll .att-sticky-cols-2 tbody .wo-sticky-1,
.table-scroll .att-sticky-cols-2 tbody .wo-sticky-2 {
  background-color: #fff;
}

.table-scroll .att-sticky-cols-2 tbody .wo-sticky-1.bg-danger,
.table-scroll .att-sticky-cols-2 tbody .wo-sticky-2.bg-danger {
  background-color: var(--bs-danger) !important;
}

.table-scroll .att-sticky-cols-2 .wo-sticky-1 {
  left: 0;
  width: 8rem;
  min-width: 8rem;
  max-width: 8rem;
}

.table-scroll .att-sticky-cols-2 .wo-sticky-2 {
  left: 8rem;
  width: 18rem;
  min-width: 18rem;
  max-width: 18rem;
  white-space: normal !important;
  box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.18);
}