.choices__list--multiple .choices__item {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
margin-right: 3.75px;
margin-bottom: 3.75px;
background-image: linear-gradient(310deg, #7928ca, #ff0080);
color: #fff;
word-break: break-all;
box-sizing: border-box;
}
.table-responsive td {
  padding: 3px 1px;
}
.table-danger{
background-color: rgba(240, 39, 13, 0.267) !important;
}
.clickable-td {
  cursor: pointer;
}
.soft-info {
background-color: rgba(13, 202, 240, 0.267) !important;
}
.soft-info1 {
background-color: rgba(225, 240, 13, 0.137) !important;
}
.soft-info2 {
background-color: rgba(240, 123, 13, 0.171) !important;
}

.soft-edit {
background-color: rgba(240, 179, 13, 0.336) !important;
}
.compact-table {
width: 100%;
font-size: 0.855rem;
border-collapse: separate !important;
border: 1px solid rgba(0, 0, 0, 0.3);
border-spacing: 0;
}

.compact-table thead th,
.compact-table .group-header {
font-size: 0.8rem;
height: 35px;
background-color: rgba(197, 227, 247);
}

.compact-table tbody tr:last-child td {
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

/* 🔧 Override Bootstrap yang kadang hilangkan border */
.compact-table th,
.compact-table td {
border: 1px solid rgba(0, 0, 0, 0.4) !important;
padding: 0px 6px !important;
vertical-align: middle !important;
white-space: nowrap;
color: #344767;
background-color: white;
}

/* Style input di dalam tabel */
.compact-table .form-control,
.compact-table .form-select {
height: 24px;
font-size: 0.8rem;
padding: 0;
border: none;
box-shadow: none;
background: transparent;
}

/* Buat thead sticky */
.table-wrapper .compact-table thead {
position: sticky;
top: 0;
z-index: 10;
background-color: rgba(197, 227, 247); /* sama seperti warna header */
}


.table-wrapper {
position: relative;
overflow: auto;
max-height: 75vh;
width: 100%;
}

/* Styling untuk headcol yang freeze */
.headcol {
position: sticky;
left: 0;
z-index: 7;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.4) !important;
}

/* Atur posisi dan lebar untuk setiap kolom freeze */
.headcol.no {
left: 0;
min-width: 40px;
max-width: 40px;
text-align: center;
z-index: 8;
}

.headcol.name {
left: 40px;
min-width: 180px;
max-width: 180px;
}

.headcol.bagian {
left: 220px;
min-width: 120px;
max-width: 150px;
}

/* Tambahkan efek shadow untuk pemisah visual */
.headcol.bagian::after {
content: '';
position: absolute;
right: -2px;
top: 0;
height: 100%;
width: 2px;
background: rgba(0, 0, 0, 0.2);
}

.headrow {
position: sticky;
top: 0;
z-index: 5; /* harus lebih kecil dari .headcol (6) agar tidak tumpang tindih */
background-color: rgba(197, 227, 247); /* warna sama dengan header */
border: 1px solid rgba(0, 0, 0, 0.4) !important;
}