/* ==========================================================================
   1. KOTAK UTAMA (Plesetan Tinggi & Bentuk agar Mirip Date Picker)
   ========================================================================== */
.ts-wrapper {
    border-radius: 10px !important;
    border: 1px solid #d5d5d5 !important;
    background-color: #fff !important;

    /* Kunci ukuran agar presisi */
    min-height: 40px !important;
    height: 40px !important;

    padding: 0 12px !important;
    padding-right: 32px !important; /* Ruang untuk panah dropdown */
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease;

    /* SUNTIK ICON PANAH DROPDOWN CUSTOM */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 12px !important;
}

/* ==========================================================================
   2. ATUR TEKS PILIHAN & INPUT INTERNAL
   ========================================================================== */
.ts-wrapper .ts-control {
    padding: 0 !important;
    min-height: auto !important;
    height: 100% !important;
    width: 100% !important;
    line-height: 36px !important; /* Center vertikal teks */
    font-size: 14px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Bersihkan gaya badge kotak jika tidak sengaja aktif */
.ts-wrapper .ts-control .item {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #333 !important;
    box-shadow: none !important;
}

/* Input teks saat mengetik pencarian */
.ts-wrapper .ts-control input {
    font-size: 14px !important;
    height: 100% !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ==========================================================================
   3. MATIKAN TOTAL GLOW BIRU SAAT DIKLIK (FOKUS)
   ========================================================================== */
.ts-wrapper.focus,
.ts-wrapper.input-active,
.ts-wrapper.dropdown-active {
    border-color: #999 !important; /* Berubah abu-abu agak tegas saat aktif */
    box-shadow: none !important;    /* DIJAMIN TIDAK ADA GLOW BIRU */
    outline: none !important;
}

/* ==========================================================================
   4. TAMPILAN MENU KOTAK LAYANG (DROPDOWN LIST)
   ========================================================================== */
.ts-wrapper .ts-dropdown {
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; /* Shadow halus menu melayang */
    margin-top: 4px !important;
    background: #fff !important;
    z-index: 1000 !important;
}

/* Baris teks pilihan di dalam menu */
.ts-wrapper .ts-dropdown .option {
    padding: 8px 12px !important;
    font-size: 14px !important;
    cursor: pointer;
}

/* Efek sorotan (hover) saat kursor mouse di atas pilihan */
.ts-wrapper .ts-dropdown .active {
    background-color: #f3f4f6 !important;
    color: #000 !important;
}