/* Supaya wrapper mengikuti style bootstrap form-control */
.ms-parent {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Tombol utama (seperti input bootstrap 4) */
.ms-choice {
    display: block !important;
    width: 100% !important;
    height: calc(2.25rem + 2px) !important;
    /* sama tinggi dengan form-control */
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e8ebf1 !important;
    border-radius: 3px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-align: left;
}

/* Hover & focus */
.ms-choice:focus,
.ms-choice:hover {
    border-color: #80bdff;
    outline: 0;
}

.ms-choice span {
    padding: 0.375rem 0.75rem !important;
}

/* Teks placeholder */
.ms-choice span.placeholder {
    color: #6c757d !important;
    padding: 0.375rem 0.75rem !important;
}

.ms-search input {
    border: 1px solid #e8ebf1 !important;
    padding: .25rem .75rem !important;
}

/* Dropdown (list pilihan) */
.ms-drop {
    border: 1px solid #e8ebf1 !important;
    border-radius: 0.25rem !important;
    padding: 0.75rem !important;
}

.ms-drop ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 10px;
}

.ms-drop ul > li {
  list-style: none;
  padding-left: 14px;
}

/* Select All tetap full width (span across 2 kolom) */
.ms-drop ul > li.ms-select-all {
  grid-column: span 2;
}

.ms-drop ul > li:hover {
  background-color: #f8f9fa;
}

/* Styling item yang sudah dipilih */
.ms-drop ul > li.selected {
  background-color: #f8f9fa !important;
  color: #fff !important; /* biar kontras */
}

/* Optional: saat hover di item selected bisa dibedakan */
.ms-drop ul > li.selected:hover {
  background-color: #f8f9fa !important;
}

/* Item checkbox */
.ms-drop ul > li label {
    display: flex !important;
    align-items: center !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-weight: 400 !important;
    color: #212529 !important;
}

/* Hover effect pada option */
.ms-drop ul > li:hover {
    background-color: #f8f9fa;
}